<template>
  <view class="view-page">
    <view class="areaList" v-if="schedule.schedule_id">
      <view class="area-item">
        <view class="area" :style="`background-color:#ff0000`"></view>
        <view class="area-price" >已售</view>
      </view>
      <view class="area-item" v-for="(item, index) in areaList" :key="index">
        <view class="area" :style="`border:1px solid ${item.strokeStyle}`"></view>
        <view class="area-price">{{ priceConversion(item.market_price) }}</view>
      </view>
    </view>
    <canvasSeatmap  ref="seatmap"
      @error="onError" 
      @onSeatTap="onSeatTap" >
    </canvasSeatmap>
    <view class="footer" v-if="schedule.schedule_id">
      <view class="notice bg-white">
        <text class="tips">温馨提示</text>请提前20分钟购票哦！</view>
      <view class="schedule bg-white">
        <view class="film-name">南京照相馆</view>
        <view class="film-info">
          <text style="color:red">今天 </text>
          9月12日 16:00-18:00
          2D 国语版</view>
        <view class="seat-list bg-white" v-if="chooseSeatList.length">
          <view class="seat-item" v-for="(seat, optindex) in chooseSeatList" :key="optindex">
            <view class="seat">
              <view class="seat-name ">{{ seat.seatName }}</view>
              <view class="seat-price" >￥{{ priceConversion(seat.marketPrice) }}</view> 
            </view>
            <view class="delete-seat" @click="cancelSeat(seat)">×</view>
          </view>
        </view>
      </view>
      <view :class="{ confirm: true,unbtn : !chooseSeatList.length || loading }"  @click="buySeat" >
        {{ chooseSeatList.length ? (`￥${totalPrice} 确认座位`) : '请选座位' }}
      </view>
    </view>

  </view>


</template>
<script>

import * as seatData from '@/uni_modules/shuai-seatmap/static/seat-data.js'
import canvasSeatmap from '@/uni_modules/shuai-seatmap/pages/seatmap.vue'

export default {
  components: {
    canvasSeatmap
  },
  data:()=> {
    return{
      loading: false,
    
      schedule_id: 0,
      schedule_no: '',
      cinema_id: '',
      schedule: {},
      areaList: [],
      seatList: [],
      scheduleList: [],
      chooseSeatList:[],
      colorList: [
        '#ffc284', // 浅黄色
        '#97cafc', // 浅蓝色
        '#C1A3A3', // 干枯玫瑰
        '#ffb0bc', // 浅粉色
        '#b6e67f', // 浅绿色
      ],
      options:{}
    }
  },
  computed: {
    totalPrice() {
      //计算总价
      let total = 0;
      for (const item of this.chooseSeatList) {
        total += Number(item.marketPrice) || 0;
      }
      return this.priceConversion(total);
    }
  },
  
  async onLoad() {
    const app = this;
    await app.getData()
    this.options = {
      title: '淘淘票',
      hallName:  `${this.schedule.hall_name}`,
      areaList: this.areaList, // 分区价格参数(含颜色)
      footerHeight: 270, // 底部预留高度
      //maxSelectNum: 4,   // 最大可选座位数
      //isolateSeats: true, // 孤座检查是否开启
    }
    this.$nextTick(() => {
      this.$refs.seatmap.init({ seatList: this.seatList, options: this.options }); 
    })
  },
  methods: {
	  
    priceConversion(total){
      return (total/100).toFixed(2);
    },
    getAreaList() {
      const schedule_area = this.schedule.schedule_area || [];
      schedule_area.forEach((item, index) => {
        item.strokeStyle = this.colorList[index % this.colorList.length] || '#ccc';
        item.areaId = item.area;
      })
      return schedule_area;
    },
    async getData() {
      //获取模拟数据
      this.schedule = seatData.schedule
      this.seatList = seatData.seatList
      this.areaList = this.getAreaList();
      uni.setNavigationBarTitle({ title: this.schedule.cinema?.cinema_name });
    },
    //选定且购买座位
    async buySeat() {
      if (this.loading) return false
      if (this.chooseSeatList.length == 0) return false;
      //检查是否存在孤座
      if (this.$refs.seatmap.validateIsolates()) {
        this.$toast('左右座位请不要留空！');
        return false;
      }
      this.$toast('开始锁座');
    },

    cancelSeat: function (seat) {
      this.$refs.seatmap.cancelSeat(seat)
    },
    onError(e){
      this.$toast(e.message || '座位图加载失败');
    },
    onSeatTap(event){
      this.chooseSeatList = event.chooseSeatList;
    }
  }
}
</script>
<style>
.view-page{ background-color: #f7f9fc;}
.bg-white {
  background-color: #fff;
}

/* 核心样式 */
.areaList {
  display: flex;
  align-items: center;     /* 上下居中 */
  justify-content: center; /* 左右居中（可选） */
  height: 40px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.areaList::-webkit-scrollbar {
  display: none;                /* Chrome、Safari、微信小程序-web-view */
}
.area-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0 8px;
}

.area {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.area-price {
  margin-left: 10rpx;
  font-size: 20rpx;
  line-height: 20px;
}


.footer {
  position: fixed;
  left: 0;
  bottom: var(--window-bottom);
  padding: 0 15px 15px 15px;
  width: 100vw;
  box-sizing: border-box;
  border-radius: 5px 5px 0% 0%;
  z-index: 100;
  background: linear-gradient(to top, #f7f9fc 50%, transparent 100%);
}

.notice {
  font-size: 10px;
  padding: 10px;
  border-radius: 5px;
  color: #ff0000;
}
.notice .tips{
  color: #ff0000;
  border: 1px solid #ff0000;
  border-radius: 4px;
  padding: 4px;
  margin-right: 4px;
}
.schedule {
  border-radius: 5px;
  padding: 5px 10px 5px 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  
}
.schedule .film-name{
    font-size: 12px;
    font-weight: bold;
    color: #333333;
    line-height: 20px;
}
.schedule .film-info{
    font-size: 10px;
    color: #999999;
    line-height: 15px;    
}


.seat-list {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  overflow-x: auto;
  white-space: nowrap;
  margin-top: 5px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.seat-list::-webkit-scrollbar {
  display: none;                /* Chrome、Safari、微信小程序-web-view */
}

.seat-item {
  display: flex;
  align-items: center;    
  justify-content: center; 
  padding: 5px;
  margin: 0 5px;
  border-radius: 5px;
  background-color: #f6fafd;

}
.seat-item .seat{
 
  margin-right: 5px;

}
.seat-item .seat .seat-name{
  font-size: 12px;
  color: #333333;
  line-height: 15px;
}
.seat-item .seat .seat-price{
  font-size: 12px;
  color: red;
  line-height: 15px;  
}
.delete-seat {
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #727272;
  text-align: center;
  
}


.confirm {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  background-color: #e54f4f;
}

.unbtn {
  background-color: #f69c9c;
}

</style>